<template>
  <div style="width:100%;height:240px;" id="realTimeAlarmPie"></div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "dataSourcePie",
  props: {
    dataSource: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  watch: {
    dataSource(curVal, oldVal) {
      this.$nextTick(() => {
        this.initEchats();
      });
    }
  },
  mounted() {},
  methods: {
    initEchats() {
      var realTimeChart = echarts.init(
        document.getElementById("realTimeAlarmPie")
      );
       var lengendData=[];
      var seriesData=[];
       for (let i = 0; i < this.dataSource.length; i++) {
        let dataItem = this.dataSource[i];
        lengendData.push(dataItem.name)
         seriesData.push( { value: dataItem.alarm_count, name: dataItem.name })
      }
      let option = {
        color: [ "#5867dd",
          "#1dc9b7",
          "#2786fb",
          "#ffb822",
          "#fd27eb",
          "#6610f2",
          "#6f42c1",
          "#e83e8c",
          "#dc3545",
          "#fd7e14",
          "#ffc107",
          "#28a745",
          "#20c997",
          "#17a2b8",
          "#e1e1ef",
          "#007bff"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: "right",
          data: lengendData
        },
        series: [
          {
            name: "实时告警",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            // label: {
            //   normal: {
            //     show: false,
            //     position: "center"
            //   },
            //   emphasis: {
            //     show: true,
            //     textStyle: {
            //       fontSize: "30",
            //       fontWeight: "bold"
            //     }
            //   }
            // },
            // labelLine: {
            //   normal: {
            //     show: true
            //   }
            // },
            data: seriesData
          }
        ]
      };

      realTimeChart.setOption(option);
      window.addEventListener("resize", function() {
        realTimeChart.resize();
      });
    }
  }
};
</script>
